@charset "utf-8";


/** 
 * Created by kroyo on 2018/04/25.
 * 添加案例页面
 */
 

@import 'common/mixincommon';



//多选按钮组
.form-checkbox{
    font-size: 0;
    margin-left: r(-30px);
    .check-wrapper{
        position: relative;
        display: inline-block;
        color: $s6;
        font-size: r(28px);
        margin-bottom: r(30px);
        margin-left: r(30px);
        &.checked{
            label{
                color: $sf;
                border-color: $acolor;
                background: $acolor;
                &:hover{
                    color: $sf;
                }
            }
            .iconfont{
                display: block;
            }
        }
        .iconfont {
            display: none;
            position: absolute;
            right: r(-10px);
            top: r(-10px);
            width: r(32px);
            height: r(32px);
            line-height: r(32px);
            color: $acolor;
            background: #fff;
            border: r(4px) solid #fff;
            border-radius: 50%;
            overflow: hidden;
            box-sizing: content-box;
        }
        label {
            display: inline-block;
            width: auto;
            height: auto;
            padding: r(22px) r(32px);
            border-radius: r(10px);
            border: r(1px) solid $sc;
            @include transitions(.4s);
            &:hover {
                color: $acolor;
                border-color: $acolor;
                cursor: pointer;
            }
        }
        input[type="checkbox"] {
            display: none;
            opacity: 0;
        }
    }
}




.main{
    border-top: 0;
    padding-top: r(48px);
    input[type='date']{
        background-color: transparent;
    }
}
.case-section{
    margin-bottom:r(50px);
}


.section-title{
    width: 100%;
    height: r(48px);
    color: $s3;
    font-size: r(32px);
    line-height: r(48px);
    font-weight: normal;
    span{
        display: inline-block;
        width: r(48px);
        height: r(48px);
        color: $sf;
        font-size: r(24px);
        background-color: $acolor;
        border-radius: 50%;
        margin-right: r(20px);
        text-align: center;
        vertical-align: r(2px);
    }
}




.section-item{
    .item-title{
        color: $s3;
        font-size: r(30px);
        margin-top: r(50px);
        margin-bottom: r(30px);
    }
    .item-input{
        width: 100%;
        height: r(80px);
        color: $s3;
        font-size: r(28px);
        border-radius: r(10px);
        border: solid r(1px) $sc;
        padding: 0 r(20px);
        @include inputplace($sb);
    }
    .addbtn{
        display: block;
        width: r(320px);
        height: r(80px);
        color: $acolor;
        font-size: r(28px);
        line-height: r(76px);
        border-radius: r(10px);
        border: solid r(2px) $acolor;
        text-align: center;
        .iconfont{
            color: $acolor;
            font-size: r(24px);
            margin-right: r(10px);
            vertical-align: r(2px);
        }
    }
    .img-wrapper{
        position: relative;
        width: r(320px);
        height: r(240px);
        margin-top: r(30px);
        margin-right: r(30px);
        text-align: center;
        overflow: hidden;
        &:nth-of-type(2n){
            margin-right: 0;
        }
        .iconfont{
            color: $sf;
            font-size: r(30px);
        }
        img{
            width: 100%;
            vertical-align: middle;
        }
    }
    .img-shade{
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: r(80px);
        line-height: r(80px);
        background-color: rgba(0,0,0,.8);
    }
    .img-list{
        .img-wrapper{
            float: left;
        }
    }
}




.item-state{
    textarea{
        width: 100%;
        height: r(280px);
        color: $s3;
        font-size: r(28px);
        border-radius: r(10px);
        border: solid r(1px) $sc;
        padding: r(20px);
        @include fontfamily();
        @include inputplace($sb);
        resize: none;
    }
}



//案例标签
.case-label{
    .section-item{
        margin-bottom: r(-30px);
    }
    .check-other{
        width: 100%;
        padding-left: r(30px);
    }
    .otherinput{
        width: 100%;
        height: r(80px);
        color: $s3;
        font-size: r(28px);
        @include inputplace($sb);
        border-radius: r(10px);
        border: r(1px) solid $sc;
        padding: 0 r(20px);
        margin-bottom: r(30px);
    }
}




//3.获得奖项
.case-awards{
    .award-addbtn{
        display: block;
        width: 100%;
        height: r(80px);
        line-height: r(76px);
        color: $acolor;
        font-size: r(28px);
        border-radius: r(10px);
        border: r(2px) dashed $sc;
        margin-top: r(50px);
        text-align: center;
        .iconfont{
            font-size: r(24px);
            margin-right: r(10px);
            vertical-align: r(1px);
        }
    }
    .award-li{
        width: 100%;
        font-size: 0;
        background-color: $f5;
        padding: r(20px) r(28px);
        margin-top: r(30px);
    }
    .award-img{
        display: inline-block;
        width: r(152px);
        height: r(120px);
        line-height: r(120px);
        font-size: 0;
        overflow: hidden;
        text-align: center;
        vertical-align: middle;
        img{
            width: 100%;
            vertical-align: middle;
        }
    }
    .award-name{
        display: inline-block;
        width: r(410px);
        color: $s3;
        font-size: r(30px);
        padding-left: r(30px);
        padding-right: r(10px);
        vertical-align: middle;
    }
    .delbtn{
        display: inline-block;
        color: $sc;
        font-size: r(30px);
        padding: 0 r(10px);
        vertical-align: middle;
    }
}



//4.更多信息
.case-moreinfor{
    .check-wrapper{
        margin-bottom: 0;
    }
    .textinput{
        width: 100%;
        height: r(80px);
        color: $s3;
        font-size: r(28px);
        @include inputplace($sb);
        border-radius: r(10px);
        border: r(1px) solid $sc;
        padding: 0 r(20px);
    }
    .item-nopublic{
        margin-top: r(50px);
        p{
            color: $sb;
            font-size: r(24px);
            padding-left: r(50px);
            margin-top: r(20px);
        }
    }
}
